<template>
    <div>
        <div v-for="(item,pindex) in cityNode" :key="item.value" class="province">
            <span class="ivu-tree-arrow updown" :class="{'ivu-tree-arrow-open':item.expand}"
                  v-if="item.children.length>0"
                  @click="item.expand=!item.expand">
                <i class="ivu-icon ivu-icon-arrow-right-b"></i>
            </span>
            <!--一级  开始-->
            <Checkbox :value="item.selected" label="twitter" class="secondGrade" v-if="nodeClick"
                      @click.prevent.native="setProvince(pindex)">
                <span>{{item.label}}</span>
            </Checkbox>
            <Checkbox :value="item.selected" label="twitter" class="secondGrade" v-else
                      @click.prevent.native="item.selected=item.selected">
                <span>{{item.label}}</span>
            </Checkbox>
            <!--一级  结束-->
            <div class="threeGrade" v-if="item.expand">
                <!--二级  开始-->
                <template v-for="(tmp,sindex) in item.children">
                    <div v-if="tmp.children" style="position: relative;">
                        <span class="ivu-tree-arrow updown" :class="{'ivu-tree-arrow-open':tmp.expand}"
                              @click="tmp.expand=!tmp.expand"><i class="ivu-icon ivu-icon-arrow-right-b"></i></span>
                        <Checkbox :value="tmp.selected" style="margin-left: 15px" v-if="nodeClick"
                                  @click.prevent.native="setCity(pindex,sindex)">
                            <span>{{tmp.label}}</span>
                        </Checkbox>
                        <Checkbox :value="tmp.selected" style="margin-left: 15px" v-else
                                  @click.prevent.native="tmp.selected=tmp.selected">
                            <span>{{tmp.label}}</span>
                        </Checkbox>
                        <div class="threeGrade" v-if="tmp.expand">
                            <template v-for="(sitem,index) in tmp.children">
                                <Checkbox :value="sitem.selected" class="threeGrades" v-if="nodeClick"
                                          @click.prevent.native="setArea(pindex,sindex,index)">
                                    <span>{{sitem.label}}</span>
                                </Checkbox>
                                <Checkbox :value="sitem.selected" class="threeGrades" v-else
                                          @click.prevent.native="sitem.selected=sitem.selected">
                                    <span>{{sitem.label}}</span>
                                </Checkbox>
                                <br v-if="(index+1)%4==0"/>
                            </template>
                        </div>
                    </div>
                </template>
                <!--二级  开始-->
                <!--没有子类二级  开始-->
                <template v-for="(tmp,index) in item.children">
                    <div v-if="!tmp.children">
                        <Checkbox :value="tmp.selected" class="secondGrades" v-if="nodeClick"
                                  @click.prevent.native="setCity(pindex,index)">
                            <span>{{tmp.label}}</span>
                        </Checkbox>
                        <Checkbox :value="tmp.selected" class="secondGrades" v-else
                                  @click.prevent.native="tmp.selected=tmp.selected">
                            <span>{{tmp.label}}</span>
                        </Checkbox>
                    </div>
                </template>
                <!--没有子类二级  结束-->
            </div>
        </div>
    </div>

</template>
<script>
    import {cityNodes} from '@/utils/config.js';

    export default {
        props: {
            cityNode: [Array],//节点数据
            nodeClick: [Boolean],//节点是否能够点击
            selectArr: {}//已经默认选择点击的接口
        },
        data () {
            return {
                social: []
            };
        },
        mounted () {
            this.setSelectArr();
        },
        methods: {
            // 省信息设置
            setProvince (index) {
                let isSelect = !this.cityNode[index].selected;
                this.cityNode[index].selected = isSelect;
                this.cityNode[index].children.forEach((item, tindex) => {
                    item.selected = isSelect;
                    if (item.children) {
                        item.children.forEach((tmp, sindex) => {
                            tmp.selected = isSelect;
                        });
                    }
                });
                this.resetData();
                this.getSelectArr();
            },
            // 城市信息设置
            setCity (index1, index2) {
                let isSelect = !this.cityNode[index1].children[index2].selected;
                this.cityNode[index1].children[index2].selected = isSelect;
                if (isSelect) {
                    this.cityNode[index1].selected = true;
                } else {
                    let tmp = false;
                    this.cityNode[index1].children.forEach(item => {
                        if (item.selected) {
                            tmp = true;
                            return;
                        }
                    });
                    this.cityNode[index1].selected = tmp;
                }
                if (this.cityNode[index1].children[index2].children) {
                    this.cityNode[index1].children[index2].children.forEach(item => {
                        item.selected = isSelect;
                    });
                }
                this.resetData();
                this.getSelectArr();
            },
            // 区域信息设置
            setArea (index1, index2, index3) {
                let isSelect = !this.cityNode[index1].children[index2].children[index3].selected;
                this.cityNode[index1].children[index2].children[index3].selected = isSelect;
                if (isSelect) {
                    this.cityNode[index1].children[index2].selected = isSelect;
                    this.cityNode[index1].selected = isSelect;
                } else {
                    let tmp = false;
                    this.cityNode[index1].children[index2].children.forEach(item => {
                        if (item.selected) {
                            tmp = true;
                            return;
                        }
                    });
                    this.cityNode[index1].children[index2].selected = tmp;
                    let tmps = false;
                    this.cityNode[index1].children.forEach(item => {
                        if (item.selected) {
                            tmps = true;
                            return;
                        }
                    });
                    this.cityNode[index1].selected = tmps;
                }
                this.resetData();
                this.getSelectArr();
            },
            resetData () {
                this.cityNode.push({});
                this.cityNode.pop();
            },
            getSelectArr () {
                let proArr = new Array();
                let cityArr = new Array();
                let districtArr = new Array();
                this.cityNode.forEach(item => {
                    if (item.selected) {
                        proArr.push(item.value);
                    }
                    item.children.forEach(sitem => {
                        if (sitem.selected) {
                            cityArr.push(sitem.value);
                        }
                        if (sitem.children) {
                            sitem.children.forEach(titem => {
                                if (titem.selected) {
                                    districtArr.push(titem.value);
                                }
                            });
                        }
                    });
                });
                this.selectArr.provinces = proArr;
                this.selectArr.citys = cityArr;
                this.selectArr.districts = districtArr;
            },
            setSelectArr () {
                this.cityNode.forEach(item => {
                    item.selected = (this.selectArr.provinces.indexOf(item.value + '') > -1) ? true : false;
                    item.children.forEach(sitem => {
                        sitem.selected = (this.selectArr.citys.indexOf(sitem.value + '') > -1) ? true : false;
                        if (sitem.children) {
                            sitem.children.forEach(titem => {
                                titem.selected = (this.selectArr.districts.indexOf(titem.value + '') > -1) ? true : false;
                            });
                        }
                    });
                });
                this.resetData();
            }
        }
    };
</script>
<style>
    .province {
        position: relative;
    }

    .updown {
        position: absolute;
        top: 0px;
    }

    .secondGrade {
        margin-left: 15px;
    }

    .secondGrades {
        margin-bottom: 10px;
        width: 150px
    }

    .threeGrade {
        margin: 0px 60px 10px 60px;
    }

    .threeGrades {
        margin-top: 10px;
        width: 150px
    }
</style>
